import { Directive, ElementRef, Input } from '@angular/core';
//Controls
import { AmChartsService } from "@amcharts/amcharts3-angular";
import { UtilsService } from '../../shared/services/utils.service';

@Directive({
    selector: '[exposureChart]',
    providers: [UtilsService]
})
export class ExposureChartDirective {
    private chart: any;
    private _chartData: any[] = [];
    private _trendLines: any[] = [];

    @Input() chartID: string;

    @Input() set chartData(value: any[]) {
        if (value && value.length == 3) {

            value = this.normalizeValues(value);
            this._chartData = value;

            this._trendLines = [
                {
                    dashLength: 1,
                    initialCategory: value[0].name,
                    finalCategory: value[2].name,
                    initialValue: value[0].close,
                    finalValue: value[0].close,
                    lineColor: "#000000"
                },
                {
                    dashLength: 1,
                    initialCategory: value[1].name,
                    finalCategory: value[2].name,
                    initialValue: value[1].close,
                    finalValue: value[1].close,
                    lineColor: "#000000"
                }];

            if (this.chart) {
                this.AmCharts.updateChart(this.chart, () => {
                    this.chart.dataProvider = this._chartData;
                    this.chart.trendLines = this._trendLines;
                });
            }
        }
    }

    constructor(private el: ElementRef, private AmCharts: AmChartsService) { }

    ngOnInit() {
        this.chart = this.AmCharts.makeChart(this.chartID, {
            type: "serial",
            rotate: true,
            autoMarginOffset: 0,
            //autoMargins: false,
            marginTop: 0,
            marginLeft: 0,
            marginBottom: 0,
            marginRight: 2,
            columnWidth: 0.6,
            dataProvider: this._chartData,
            graphs: [{
                colorField: "color",
                fillAlphas: 0.8,
                lineColor: "#888888",
                openField: "open",
                type: "column",
                valueField: "close"
            }],
            trendLines: this._trendLines,
            balloon: {
                enabled: false
            },
            categoryField: "name",
            categoryAxis: {
                axisAlpha: 0,
                gridAlpha: 0,
                labelsEnabled: false
            },
            valueAxes: [{
                axisAlpha: 0,
                gridAlpha: 0,
                labelsEnabled: false,
                maximum: 100
            }],
            listeners: [{
                event: "rendered",
                method: (e) => {
                    /*
                    if (this.el.nativeElement.children.exposurecontainer.children.exposurecategories) {
                        this.resizeHorizontalLine(e.chart.valueAxes);
                    }
                    */
                }
            },
            {
                event: "resized",
                method: (e) => {
                    // this.resizeHorizontalLine(e.chart.valueAxes);
                }
            }]
        });
    }

    ngOnDestroy() {
        this.AmCharts.destroyChart(this.chart);
    }

    private resizeHorizontalLine(valueAxes: any[]): void {
        if (valueAxes.length != 0 && valueAxes[0].data) {
            var maxColumn = Math.max.apply(Math, valueAxes[0].data.map(function (e) {
                var graphs = e.axes[valueAxes[0].id].graphs;
                return graphs[Object.keys(graphs)[0]].columnWidth;
            }));

            this.el.nativeElement.children.exposureline.width = this.el.nativeElement.children.exposurecontainer.children.exposurecategories.clientWidth + valueAxes[0].x + Math.ceil(maxColumn) + 'px';
        }
    }

    private getNormalized(value, min, max) {
        return (value - min) / (max - min) * 100;
    }

    private normalizeValues(data: any[]): any[] {
        let min = 0;
        let max = Math.max.apply(Math, data.map(function (object) { return object.close; }));

        return data.map((row) => {
            row.open = this.getNormalized(row.open, min, max);
            row.close = this.getNormalized(row.close, min, max);
            return row;
        });
    }
}